<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>其他管理</el-breadcrumb-item>
            <el-breadcrumb-item>消息管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :model="from" ref="_selectfrom">
            <el-row :gutter="5">
                <el-col :span="3">
                        <el-select placeholder="--请选择类型--"  v-model="from.State">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="未读" :value="0"></el-option>
                            <el-option label="已读" :value="1"></el-option>
                        </el-select>

                </el-col>
                <el-col :span="3">

                        <el-select placeholder="--请选择消息类型--" v-model="from.MessageType">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="普通消息" :value="1"></el-option>
                            <el-option label="公告" :value="2"></el-option>
                        </el-select>

                </el-col>
                <el-col :span="3">

                        <el-date-picker style="width: 100%" placeholder="发布时间"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        v-model="from.start"></el-date-picker>

                </el-col>
                <el-col :span="3">
                        <el-date-picker style="width: 100%" placeholder="截止时间"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        v-model="from.end"></el-date-picker>

                </el-col>
                <el-col :span="2">
                        <el-button plain type="success" icon="el-icon-search"  @click="formdata"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="padding: 10px 0px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除</el-button>
                    <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline" @click="AddCustomer_dialog=true">全部已读</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%"  @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="MainText" label="正文" align="center" show-overflow-tooltip ></el-table-column>
                    <el-table-column prop="CreateTime" label="创建时间" align="center" show-overflow-tooltip >
                        <template slot-scope="slot">
                            {{ fmtDate(slot.row.CreateTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="State" label="状态" align="center" show-overflow-tooltip>
                        <template slot-scope="slot">
                            <label v-if="slot.row.State==0" style="color: chocolate">未读</label>
                            <label v-else style="color: #67C23A">已读</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ReadTime" label="阅读时间" align="center" show-overflow-tooltip >
                        <template slot-scope="slot">
                            {{ fmtDate(slot.row.ReadTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="MessageType" label="消息类型" align="center" show-overflow-tooltip>
                        <template slot-scope="slot">
                            <label v-if="slot.row.State==2">公告</label>
                            <label v-else>普通消息</label>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="210" align="center">
                        <template slot-scope="scope">
                            <el-button plain type="success" size="mini" @click="edit_event(scope.row)">查看</el-button>
                            <el-button plain type="info" size="mini" @click="Reply_event(scope.row)">批复</el-button>
                            <el-button plain type="danger" size="mini" @click="BatchDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog title="正文" :visible.sync="SeeContent_details.dialog" width="40%">
            <el-form>
                <el-form-item>
                    <el-input disabled type="textarea" v-model="SeeContent_details.details.MainText" :autosize="{ minRows: 6}"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import * as publicjs from "../../../public/Scriput/Public";

    export default {
        name: "MessageTable",
        data() {
            return {
                //表格查询数据
                from: {
                    State: "",
                    MessageType: '',
                    start: '',
                    end: '',
                },
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //多选列表的数据集合
                SelectMore_lis: [],
                SeeContent_details: {
                    dialog: false,
                    details: '',
                },
            }
        },
        created() {
            this.formdata()
        },
        methods: {
            //初始化表格数据加载
            formdata() {
                this.$http.post('MessageTable/MessageData', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    from: this.from,
                }).then(res => {
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表格单个删除
            BatchDeleteOne_event(obj) {
                this.SelectMore_lis.push(obj)
                this.BatchDelete_event()
            },
            //批量删除
            BatchDelete_event() {
                let idlis = []
                if (this.SelectMore_lis.length == 0) {
                    this.$message.warning('您还未选择需要删除的数据!')
                } else {
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        idlis.push(this.SelectMore_lis[i].Id)
                    }
                    this.$confirm('你确定要删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let loadding = this.openLoading();
                        this.$http.post('MessageTable/MessageDel', idlis).then(res => {
                            loadding.close();
                            if (res.data.res) {
                                this.$message.success('删除成功')
                                this.formdata()
                                this.SelectMore_lis = []
                            } else {
                                this.$message.warning('删除失败')
                            }
                        }).catch(() => {
                            this.$message.error('服务器异常,请联系管理员!')
                        })
                    }).catch(() => {
                        this.$message.info('已取消!')
                        this.SelectMore_lis = []
                    })
                }
            },
            //编辑
            edit_event(obj) {
                this.SeeContent_details.dialog = true
                this.SeeContent_details.details = obj
            },
            //时间转化
            fmtDate(val) {
                if (val != null) {
                    let newtime = val.split(' ')
                    return newtime[0]
                }
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //批复
            Reply_event(obj) {
                // this.$http.get('MessageTable/UrlTesting?url='+obj.Url).then(res=>{
                //     console.log(res.data)
                // })
            },
        },
    }
</script>

<style scoped>

</style>
